<template>
  <div style="width: 100%;position: relative;">
    <div class="hk-flex card-wk" style="flex-wrap: wrap;">
      <!-- 全部 -->
      <div class="card-container" :class="{ active: activeIndex == 0 }" @click="handleClick(0)">
        <div class="card-pic">
          <img
            style="width: 26px; height:26px"
            :src="require('@/assets/images/sjjr_jrsjy_all.png')"
            alt=""
          >
        </div>
        <div class="card-text hk-flex">
          <p class="card-title">全部(台)</p>
          <p class="card-sub-title">
            <span class="card-num">{{ getTotal() }}</span>
          </p>
        </div>
      </div>
      <!-- 内容 -->
      <div
        v-for="(item, index) in (showAll?data:data.slice(0,6))"
        :key="index"
        class="card-container"
        :class="{ active: activeIndex == index + 1 }"
        @click="handleClick(index+1,item)"
      >
        <div class="card-pic">
          <img
            style="width: 26px; height: 26px"
            :src="require(`@/assets/images/tabs${index+1}.png`)||require('@/assets/images/sjjr_jrsjy_all.png')"
            alt=""
          >
        </div>
        <div class="card-text hk-flex">
          <p class="card-title">{{ item.name }}(台)</p>
          <p class="card-sub-title">
            <span class="card-num">{{ item.value }}</span>
          </p>
        </div>
      </div>
    </div>
    <!-- 按钮 -->
    <!-- 显示与隐藏 -->
    <div v-if="data.length>6" class="btn-box" @click="showAll=!showAll">
      <el-button
        v-if="showTop"
        icon="el-icon-caret-top"
        size="mini"
        @click="showTop = false"
      />
      <el-button
        v-if="!showTop"
        icon="el-icon-caret-bottom"
        size="mini"
        @click="showTop = true"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'TabList',
  props: {
    data: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      activeIndex: 0,
      showTop: false,
      showAll: false
    }
  },
  methods: {
    getTotal() {
      let total = 0
      this.data.forEach((i) => {
        total += i.value
      })
      return total
    },
    handleClick(index, val) {
      this.activeIndex = index
      this.$emit('handleClick', index, val)
    }
  }
}
</script>

<style lang="scss" scoped>
.card-wk{
  height: 100%;
  width: 100%;
  margin-top:-10px;
  // justify-content:space-around;
}
.card-container {
  width: 12%;
  height: 60px;
  display: flex;
  margin-right: 20px;
  justify-content: flex-start;
  align-items: center;
  padding: 0 15px;
  background: #ffffff;
  border: 1px solid rgba(217, 217, 217, 1);
  border-radius: 4px;
  margin-bottom: 20px;
  cursor: pointer;
  // &:last-child {
  //   margin-right: 0px;
  // }
  .card-title {
    flex: 1;
  }
  .card-text {
    flex: 1;
    margin-left: 10px;
  }
}
.btn-box{
  position: absolute;
  right: 4%;
  top: 8px;
}
.active {
  background: #edf0fd;
  border: 1px solid rgba(75, 110, 239, 1);
  border-radius: 4px;
}
.card-num {
  color: #2979ff;
}
</style>
